<template>
  <div class="mine">
    <!--头像部分-->
    <div class="mine_top">
        <router-link to="/userMsg">
            <span></span>
        </router-link>
        <p>182OBHIGQ3641</p>
        <div>
            <router-link to="/info">
                <img src="../../assets/images/icon_msg.png">
            </router-link>
        </div>
    </div>

    <!--购物车-->
    <div class="mine_menu">
        <ul>
            <li>
                <router-link to="/cart">
                    <img src="../../assets/images/icon_car.png">
                    <p>购物车</p>
                </router-link>
            </li>
            <li>
                <router-link to="/collect">
                    <img src="../../assets/images/icon_collect.png">
                    <p>我的收藏</p>
                </router-link>
            </li>
            <li>
                <router-link to="/coupon/chuCoupou">
                    <img src="../../assets/images/icon_yhq.png">
                    <p>红包/优惠券</p>
                </router-link>
            </li>
        </ul>
    </div>
    <user></user>
  </div>
</template>

<script>
    import User from './mine2'
    export default{
        components:{
            User
        }
    }

</script>

<style scoped>
.mine{
    width: 100%;
    height: 47.33rem;
    background-color:#f3f3f3;
    position: absolute;
    z-index: 11;
}
.mine_top{
    width: 100%;
    height:13.7rem;
    position: relative;
    background: url(../../assets/images/mbg.jpg) no-repeat;
    background-size: 100%;
}
.mine_top span{
    width: 5rem;
    height: 5rem;
    border: solid 3px rgba(255,255,255,.3);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2.58rem 0 0 -2.58rem;
    border-radius: 50%;
}
.mine_top p{
    top: 50%;
    left: 0;
    margin-top: 3.75rem;
    width: 100%;
    color: #FFF;
    font-size: 1.06rem;
    position: absolute;
    text-align: center;
}
.mine_top div{
    position: absolute;
    top: 2.5rem;
    right: 1.67rem;
}
.mine_top div img{
    width: 2.5rem;
    height: 2.42rem;
}
.mine_menu{
    width: 100%;
    background: #FFF;
    padding:0.83rem 0 0.42rem;
}
.mine_menu ul:after{
    clear: both;
    content: '';
    font-size: 0;
    display: block;
    visibility: hidden;
    height: 0;
}
.mine_menu ul li{
    width: 33.3%;
    float: left;
    text-align: center;
}
.mine_menu ul li img{
    width: 4.17rem;
}
.mine_menu ul li p{
    line-height: 1.5rem;
    color: #aaa;
    font-size: 1.05rem;
    margin-top: 0.33rem;
}
</style>
